<template>
	<div>
		<div v-if="cm.iscustom" :style="{height:cm.css.base.h+'px',display:'table-cell',verticalAlign:'middle'}">
			<div :style="[custom_absolute]" class="absolute-wrapper">
				<img :src="cm.props.url" @click="add_number" class="custom-img" />
				<span :style='[font_size,color]'>{{number}}</span>
			</div>
		</div>

		<div v-else :style="[text_center,{height:cm.css.base.h+'px'},line_height]">
			<div :style="[block_absolute]" class="absolute-wrapper">
				<i class="iconfont" :class="cm.props.url" :style="[display_block,font_size,color]" @click="add_number"></i>
				<span :style='[display_block,font_size,color]'>{{number}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	// 防抖函数
	import {
		debounce
	} from '../utils.js'


	export default {
		name: 'BaseCountnumber',
		props: {
			compid: {
				type: [String, Number],
				required: true
			}
		},
		data() {
			return {
				number: 0,
				property_value: this.$store.getters.getCompConfigByCompid(this.compid),
				old_property_val: null
			}
		},

		computed: {
			cm() {
				return this.$store.getters.getCompConfigByCompid(this.compid)
			},
			// 图标上下布局时上下左右居中（绝对定位）
			block_absolute() {
				var position = 'relative'
				var top = 0
				var left = 0
				var marginTop = 0
				var marginLeft = 0
				var fontSizeNum = this.cm.props.size.replace("px", "")
				// console.log(fontSizeNum)
				if (this.cm.props.layout === 'top') {
					position = 'absolute'
					top = 50 + '%'
					left = 50 + '%'
					marginTop = '-' + fontSizeNum + 'px'
					marginLeft = '-' + fontSizeNum / 2 + 'px'
				}
				return {
					position: position,
					top: top,
					left: left,
					marginTop: marginTop,
					marginLeft: marginLeft
				}
			},
			// 自定义图片并且上下布局时左右居中（绝对定位）
			custom_absolute() {
				var position = 'relative'
				var top = 0
				var left = 0
				var marginTop = 0
				var marginLeft = 0
				// 			    var fontSizeNum=this.cm.props.size.replace("px","")
				// 				console.log(fontSizeNum)
				if (this.cm.props.layout === 'top') {
					position = 'absolute'
					top = 50 + '%'
					left = 50 + '%'
					marginTop = '-' + 58 + 'px'
					marginLeft = '-' + 58 + 'px'
				}
				return {
					position: position,
					top: top,
					left: left,
					marginTop: marginTop,
					marginLeft: marginLeft
				}
			},
			// 上下布局时水平居中
			text_center() {
				var textAlign = 'left'
				if (this.cm.props.layout === 'top') {
					textAlign = 'center'
				}
				return {
					textAlign: textAlign
				}
			},
			// 垂直居中
			line_height() {
				return {
					lineHeight: this.cm.css.base.h + 'px'
				}

			},
			display_block() {
				var display = 'inline-block'
				var height = 0
				var lineHeight = 0
				if (this.cm.props.layout === 'top') {
					display = 'block'
					height = this.cm.props.size
					lineHeight = this.cm.props.size
				}
				return {
					display: display,
					height: height,
					lineHeight: lineHeight,
				}
			},
			font_size() {
				return {
					fontSize: this.cm.props.size
				}
			},
			color() {
				if (this.number == 0 && this.cm.isProview) {
					return {
						color: '#ddd'
					}
				}
				return {
					color: this.cm.props.color
				}
			}
		},
		watch: {
			property_value: {
				handler(new_val, old_val) {
					this.change_component({
						new_val,
						old_val
					});
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			add_number() {
				if (this.cm.isProview) {
					this.number = 1
				}
			},
			change_component: debounce(function(
				params
			) {
				const revoke_state = this.$store.getters.revoke_state
				if (this.old_property_val) {
					// 表示是撤销状态的值的更新
					if (revoke_state) {
						this.$store.commit('REVOKE_STATE', false)
					} else {
						this.$store.commit('ADD_REVOKE_CONTENT', this.old_property_val)
					}
				}
				this.old_property_val = JSON.parse(JSON.stringify(params.new_val))
			}, 300)
		}

	}
</script>

<style lang="scss">
	.form-item .el-button {
		width: 100%;
		height: 100%;
		background: inherit;
		color: inherit;
		border: 0;
	}

	.form-item .el-button--small {
		font-size: inherit;
	}

	.custom-img {
		width: 115px;
		height: 115px;
	}

	// 	.absolute-wrapper{
	// 		padding:0 10px;
	// 	}
</style>
